<template>
  <div class="todo-footer">
    <label>
      <!-- 复选框   勾选,已经全部的事件完成  不勾选:事件并没有全部完成 -->
      <input
        type="checkbox"
        :checked="todoIsDone.length == todos.length && todos.length > 0"
        @change="changeHandler"
      />
    </label>
    <span>
      <span>已完成{{ todoIsDone.length }}</span> / 全部{{ todos.length }}</span
    >
    <button class="btn btn-danger" @click="clickHandler">清除已完成任务</button>
  </div>
</template>

<script>
export default {
  props: ["todos", "todoIsDone", "updateAllDone", "deleteDoneTodo"],
  methods: {
    //   全选的复选框的回调函数
    changeHandler(e) {
      //    获取到复选框的勾选状态
      this.updateAllDone(e.target.checked);
    },
    // 清除已经完成的按钮的回调函数
    clickHandler() {
      this.deleteDoneTodo("1111111111111111")
    },
  },
};
</script>

<style>
</style>